<template>
  <div class="main" :data="data">
    <div :id="id"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import geoJSON from './json/map.json'
// import geoJSON from './json/hainan.json'  （含三沙市）
import tools from './tools/autoHover.js' //引入tools.js
export default {
  name: 'map',
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    mapToolTips: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    id: function () {
      return `map-${Math.random()}`
    },
  },
  watch: {
    mapToolTips: function (val) {
      if(val) {
        tools.stopAuto()
      } else {
        this.onInit()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.onInit()
    })
  },
  updated() {
    this.$nextTick(() => {
      this.onInit()
    })
  },
  methods: {
    onInit() {
      echarts.registerMap('海南', geoJSON)
      var chartDom = document.getElementById(this.id)
      var myChart = echarts.init(chartDom)
      var geoCoordMap = {
        '海口市': [110.349235, 19.984966],
        '三亚市': [109.508268, 18.247872],
        '儋州市': [109.576782, 19.517486],
        '五指山市': [109.516662, 18.776921],
        '琼海市': [110.466785, 19.246011],
        '文昌市': [110.753975, 19.612986],
        '万宁市': [110.388793, 18.796216],
        '东方市': [108.653789, 19.10198],
        '定安县': [110.349235, 19.484966],
        '屯昌县': [110.102773, 19.362916],
        '澄迈县': [110.007147, 19.737095],
        '临高县': [109.687697, 19.908293],
        '白沙黎族自治县': [109.452606, 19.224584],
        '昌江黎族自治县': [109.053351, 19.260968],
        '乐东黎族自治县': [109.175444, 18.74758],
        '陵水黎族自治县': [110.037218, 18.505006],
        '保亭黎族苗族自治县': [109.70245, 18.636371],
        '琼中黎族苗族自治县': [109.839996, 19.03557],
      }

      var convertData = function (data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            let obj = {
              name: data[i].name,
            }
            obj = {
              ...obj,
              ...data[i],
            }
            obj.value = geoCoord.concat(data[i].value)
            res.push(obj)
          }
        }
        // console.log("res")
        // console.log(res)
        return res
      }

      let setAmount = this.setAmount
      let setAmountText = this.setAmountText
      var option
      option = {
        tooltip: {
          show: true,
          trigger: 'item',
          backgroundColor: 'transparent',
          enterable: true, //是否支持鼠标移进
          // showContent: true, //是否显示提示框浮层，默认显示。
          // triggerOn: 'click', // 触发时机  'mouseover'鼠标移动时触发。     'click'鼠标点击时触发。  'mousemove|click'同时鼠标移动和点击时触发。
          formatter: function (params) {
            const { data } = params
            let list = []
            let listItem = ''
            if(data && data.labelValueDtoList) {
              const labels= data.labelValueDtoList
              for (var i = 0; i < labels.length; i++) {
                list.push(
                  `<span>${labels[i].label}：${labels[i].value}/条</span>`
                )
              }
              listItem = list.join('')
            }
            const str =
              `<div id="map-tooltips-wrap">` +
              `<div class="title">${data.name}-走私情报数据推送数</div>` +
              // `<div class="more">更多<span class="triangle"></span></div>` +
              `<div class="listItem">${listItem}</div>`+
              `</div>`
            return str
          },
          extraCssText: 'z-index: 9'
        },
        geo: [
          {
            map: '海南',
            label: {
              show: true,
              color: '#fff',
            },
            z: 2,
            zoom: 1.1,
            itemStyle: {
              areaColor: 'rgba(8,48,109, 0.2)',
              borderColor: 'rgba(0, 180, 255, .6)',
              borderWidth: 5,
              shadowColor: 'rgba(0, 180, 255, 1)',
              shadowBlur: 35,
            },
            emphasis: {
              label: {
                color: '#fff',
              },
              itemStyle: {
                areaColor: 'rgba(0, 180, 255, 0.6)',
                borderWidth: 1,
              },
            },
          },
        ],
        series: [
          {
            type: 'map',
            map: '海南',
            label: {
              show: false,
            },
            z: 3,
            zoom: 1.1,
            itemStyle: {
              areaColor: 'rgba(8,48,109, 0.2)',
              borderColor: 'rgba(255, 255, 255, .6)',
              borderWidth: 2,
              shadowColor: 'rgba(0, 180, 255, 1)',
              shadowBlur: 35,
            },
            emphasis: {
              label: {
                color: '#fff',
              },
              itemStyle: {
                areaColor: 'rgba(0, 180, 255, 0.6)',
                borderWidth: 1,
              },
            },
            data: this.data,
          },

          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(this.data),
            symbolSize: function (val) {
              const num = val[2]
              let size = 0
              if (num > 0 && num < 10) {
                size = 10
              } else if (num > 40) {
                size = 40
              } else {
                size = val[2]
              }
              return size
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke',
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#D33C36',
                shadowBlur: 10,
                shadowColor: '#333',
              },
            },
            zlevel: 1,
          },
        ],
      }
      myChart.setOption(option, true)
      tools.autoHover(myChart, option, this.data.length, 3000)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    setAmount(num) {
      let amount = 0
      if (num > 100000000) {
        let result = (num / 100000000).toString()
        amount = result.indexOf('.') === -1 ? result : result.toFixed(2)
      } else if (num > 100000) {
        let result = (num / 10000).toString()
        amount = result.indexOf('.') === -1 ? result : result.toFixed(2)
      } else {
        amount = num
      }
      return amount
    },
    setAmountText(num) {
      let text = ''
      if (num > 100000000) {
        text = '亿'
      } else if (num > 100000) {
        text = '万'
      }
      return text
    },
  },
}
</script>
<style lang="less">
@font-face {
  font-family: 'pang';
  src: url(../../font/PangMenZhengDaoBiaoTiTi-1.ttf);
}
#map-tooltips-wrap {
  font-family: 'MicrosoftYaHei-Bold';
  width: 50vh;
  // height: 22vh;
  background-image: url(./image/tooltips-wrap.png);
  background-size: 100% 100%;
  padding-top: 0.926vh;
  padding-bottom: 3vh;
  font-size: 1.48148vh;
  position: relative;
  .title {
    width: 90%;
    height: 3.7vh;
    margin: 2.47vh;
    padding-left: 1.777vh;
    line-height: 3.7vh;
    background-image: url(./image/title.png);
    background-size: 100% 100%;
    font-size: 1.8vh;
  }
  .more {
    width: 5.5vh;
    position: absolute;
    right: 3vh;
    top: 4vh;
    border: 1px solid #fff;
    border-radius: 5px;
    color: #fff;
    font-family: 'MicrosoftYaHei';
    padding: 0 5px;
    font-size: 1.5vh;
    .triangle {
      display: block;
      width: 0;
      height: 0;
      border-width: 5px 0 5px 5px;
      border-style: solid;
      border-color: transparent transparent transparent #fff; /*透明 透明 透明 黄*/
      position: absolute;
      top: 5px;
      left: 4vh;
    }
    cursor: pointer;
  }
  .listItem {
    width: 100%;
    padding-left: 4.5vh;
    margin-bottom: 1.2vh;
    font-size: 1.8vh;
    overflow: hidden;
    span {
      float: left;
      width: 50%;
      margin-bottom: 1.2vh;
      overflow: hidden;
    }
  }
}
</style>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;

  > div {
    width: 100%;
    height: 100%;
  }
}
</style>
